<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    v-on
      绑定事件

    v-on:事件类型.修饰符 = "函数"

    缩写
      @事件类型.修饰符 = "函数"

    事件的函数必须写在methods中

    如果想要获取到事件对象
    <标签 v-on:click='函数(参数1, 参数2, $event)'>
      $event就是事件对象
    
    .stop - 调用 event.stopPropagation()。
    .prevent - 调用 event.preventDefault()。
    .capture - 添加事件侦听器时使用 capture 模式。
    .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    .native - 监听组件根元素的原生事件。
    .once - 只触发一次回调。
    .left - (2.2.0) 只当点击鼠标左键时触发。
    .right - (2.2.0) 只当点击鼠标右键时触发。
    .middle - (2.2.0) 只当点击鼠标中键时触发。
    .passive - (2.3.0) 以 { passive: true } 模式添加侦听器


    在addEventListener('type', handler, isCapture)
    google将最后的一个参数改成了对象
      addEventListener('type', handler, {
        isCapture: false,
        passive: true
      })

  -->
  <div id="app">
    <button @click.self="fn(1, $event)">按钮<span>内容</span></button>
    <input type="text" @keyup.ctrl="fn">
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      },
      methods: {
        // methods中并非只能写事件函数
        fn () {
          alert('1')
        }
      }
    })
    
  </script>
</body>
</html>